<template>
  <div>
    <div class="head">
      <h2><span class="sp1"></span>课程管理</h2>
      <div class="seek">
        <span>输入搜索</span
        ><el-input v-model="keyword" placeholder="输入课程ID"></el-input>

        <span>上次消费时间</span>
        <el-date-picker
          class="start"
          v-model="value1"
          type="date"
          placeholder="开始日期"
        >
        </el-date-picker>
        <span class="el-icon-minus"></span>
        <el-date-picker v-model="value2" type="date" placeholder="结束日期">
        </el-date-picker>
        <el-button type="primary" @click="seekHandler">查询</el-button>
        <el-button plain @click="resetList">重置</el-button>
        <el-dropdown trigger="click" :hide-on-click="false">
          <span class="el-dropdown-link" @click="changecolor">
            <i class="iconfont icon-shousuoxiajiantou"></i>&nbsp;&nbsp;高级筛选
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item><input type="checkbox" />上架</el-dropdown-item>
            <el-dropdown-item><input type="checkbox" />下架</el-dropdown-item>
            <el-dropdown-item><input type="checkbox" />上传人</el-dropdown-item>
            <el-dropdown-item
              ><input type="checkbox" />课程名称</el-dropdown-item
            >
          </el-dropdown-menu>
        </el-dropdown>
      </div>

      <h5>课程列表</h5>
    </div>
  </div>
</template>

<script>
import iconfont from "../../../assets/font_3467524_pt43urxpyjq/iconfont.css";
export default {
  data() {
    return {
      keyword: "",
      value1: "",
      value2: "",
      colorpag: false,
    };
  },
  methods: {
    // 高级筛选变换颜色
    changecolor() {
      this.colorpag = !this.colorpag;
      let see = document.querySelector(".el-dropdown-link");
      this.colorpag
        ? (see.style.color = "#438afe")
        : (see.style.color = "#000");
      console.log(this.colorpag);
    },
    seekHandler() {
      this.$emit("parentSearch", this.keyword);
    },
    resetList() {
      this.keyword = "";
      this.value1 = "";
      this.value2 = "";
      this.seekHandler();
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.el-dropdown-menu__item {
  padding-left: 10px !important;
  margin-top: 7px;
  font-weight: normal;
  font-size: 16px !important;
}

// 下拉选项设置
.el-dropdown-menu {
  height: 140px;
  width: 120px;
}
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
.el-icon-arrow-down {
  font-size: 12px;
}
// /deep/.start > .el-input__inner {
//   border: none;
// }
// 高级筛选
.el-dropdown-link {
  font-size: 18px;
  color: #000;
}
// 查询按钮设置
/deep/.el-button {
  height: 32px;
  padding: 0px;
  width: 100px;
  font-size: 16px;
}
/deep/[data-v-73cd7bcb] .el-input__prefix {
  left: 120px;
}
.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 160px;
}

/deep/.el-input--prefix .el-input__inner {
  padding-left: 10px;
}

.el-input {
  height: 32px;
  width: 180px;
  font-size: 16px;
}
.seek {
  display: flex;
  justify-content: space-between;
  align-content: center;
  align-items: center;
  background-color: #fff;
  width: 100%;
  margin-bottom: 21px;
  padding: 16px 40px;
  box-sizing: border-box;
}
.seek > span {
  font-weight: 700;
}
.sp1 {
  border-left: solid 8px #428bfe;
  margin-right: 20px;
}
h2 {
  font-size: 20px;
  margin-top: 15px;
  margin-bottom: 25px;
  font-weight: normal;
}
h5 {
  font-size: 18px;
  font-weight: 900;
  margin-bottom: 20px;
  margin-left: 40px;
}
</style>
